/**
 * 自定义下拉组件
 */
import React from 'react';
import { Button, Icon, Menu, Dropdown} from 'antd';
import './SimpleTalbe1.less'
import PropTypes from 'prop-types';

export default class SimpleDropdown extends React.Component{

  static defaultProps={
    classNameStyle:"table-title-top-dropdown",
    dropdownMenu:{
      key: 'dropdownMenu1',
      items: [{key: 'all', titile: "全部"},
        {key: 'part', titile: "部分"},
        {key: 'select', titile: "选定"},]
    }
  }

  static propTypes ={
    dropdownMenu:PropTypes.object.isRequired,
    classNameStyle:PropTypes.string,
    onFinishSelect:PropTypes.func,
  }

  state={
    dropdownMenu:this.props.dropdownMenu,
    selectedItem:this.props.dropdownMenu.items[0]
  }
  render(){

    const {dropdownMenu,selectedItem} = this.state;
    return(
      <Dropdown overlay={<Menu
        onClick={(e) => {
          dropdownMenu.items.map((item, index) => {
            if (e.key === item.key) {
              this.setState({
                selectedItem: dropdownMenu.items[index],
              },()=>{this.props.onFinishSelect&&this.props.onFinishSelect(this.state.selectedItem)})
            }
          })
        }}>
        {
          dropdownMenu.items.map((item, index) => {
            return (<Menu.Item key={item.key}>{item.titile}</Menu.Item>)
          })
        }
      </Menu>} placement="bottomLeft">
        {this.props.children ||<Button className={this.props.classNameStyle}>{selectedItem.titile} <Icon
          type="down"/></Button>}
      </Dropdown>

    )
  }
}
